<template>
  <div
    class="hero min-h-screen bg-base-200 bg-origin-border p-4 border-4 border-dashed"
    style="
      background-image: url(https://n.sinaimg.cn/sinacn20117/166/w620h346/20200103/e500-imrkkfx3136519.gif);
    "
  >
    <div class="hero-content flex-col lg:flex-row-reverse">
      <div class="text-center lg:text-left">
        <h1 class="text-5xl font-bold">Login now!</h1>
        <p class="py-6">
          Hello, everyone. My name is CAI Xukun, a personal trainee who has been
          practicing for two and a half years. I like singing, dancing, rap and
          basketball. MUSIC. Chicken you are so beautiful, chicken you are so beautiful.
        </p>
      </div>
      <div
        class="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-100 flex items-center"
      >
        <div class="card-body">
          <img class="w-56 h-56" :src="imgSrc" v-if="imgSrc" />
          <div class="w-56 h-56" v-else></div>
          <div class="text-center">{{ message }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, nextTick, getCurrentInstance, toRefs } from "vue";

import { useRouter } from "vue-router";

import { useUserStore } from "../store/index";
import { ElMessage } from "element-plus";

const userStore = useUserStore();

const router = useRouter();

let imgSrc = ref<string>("");

const { userInfo, message, key } = toRefs(useUserStore());

onMounted(async () => {
  let res: any = await userStore.actionQrKey();
  imgSrc.value = res.data.qrimg;
  check();
});

//检测是否扫码
const check = () => {
  let timer = setInterval(() => {
    userStore.actionCheck();

    if (userInfo && userInfo.value.code === 803) {
      setTimeout(() => {
        router.push("recommend");
        ElMessage.success('登陆成功')
      }, 1500);
      clearInterval(timer);
      return;
    }
    
  }, 3000);
};
</script>

<style scoped></style>
